#div1{
	width: 0;
	height: 0;
	padding: 0;
	border-top:10px #0061b1 solid;
	border-bottom: 10px #0061b1 solid;
	border-left: 10px #fff solid;
	border-right: 10px #fff solid;
	border-radius: 50%;
	/*rotate是在平面中旋转，正值表示顺时针*/
	/*scale括号中有两个值，第一个是x方向，第二个是y方向，如果只有一个，则x=y*/
	transform: rotate(-45deg) scale(2,1) ;
	/*moz火狐浏览器*/
	-moz-animation: rotate(-45deg) scale(2,1);
	/*ms微软的IE浏览器*/
	-moz-animation: rotate(-45deg) scale(2,1);
	/*o欧明浏览器*/
	-moz-animation: rotate(-45deg) scale(2,1);
	/*webkit谷歌浏览器，苹果浏览器*/
	-moz-animation: rotate(-45deg) scale(2,1);
     -webkit-transform: rotate(-45deg) scale(2,1);
	 /*过度效果，从一个状态缓慢的变成另一个状态*/
	 transition: all 2s;
	 }
	 /*鼠标暂停*/
	
#div1:hover{
transform:rotate(-45deg);
}
#div2{
	width: 140px;
	height: 10px;
	background-color: red;
	border-left: 20px yellow solid;
	border-right: 20px yellow solid;
	border-radius: 4px;
	transition: all 2s;
}
#div2:hover{
	transform: scale(1.2);
}
#div3{width: 0;height: 0;animation: myAnimation 2s infinite;}
@keyframes myAnimation{
	0%{
		width: 0;height: 0;
	}
	50%{
		width: 100px;height: 100px;background-color: red;border-radius: 20%;
		transform: rotate(360deg);	}
		100%{
			width: 180px;height: 180px;background-color: beige;border-radius: 50%;
			transform: rotate(720deg);
		}
}
